<template>
	 <!-- :style="{height:100 + '%' - `${configInfo.tabbarHeight * 2}px`}" -->
	<swiper class="swiper" :vertical="true" @change="change" @touchstart="touchStart" @touchend="touchEnd">
		<block v-for="item of imageList" :key="item.id">
			<!-- <swiper-item ref="swiperItem" data-type="video" class="swiper-item" v-if="item.type === 'video'">
				<videoPlayer :video="item" ref="player"></videoPlayer>
			</swiper-item> -->
			<swiper-item @tap.stop="toUserDetail(item.id)" ref="swiperItem" data-type="img">
				<image :src="item.master_map" mode="scaleToFill" class="swiper-img" :indicator-dots="false"></image>
				<view class="flex-1 ml-lg mt-md">
					<view class="flex-y-baseline flex-y-start">
						<view class="f-desc c-title ml-sm mr-sm">{{item.user_nicename}}</view>
						<i v-if="item.sex == 0" class="iconfont nan c-success" ></i>
						<i v-else class="iconfont nv c-warning" ></i>
						
					</view>
					<view class="flex-y-baseline flex-1 mt-md">
						<view class="f-desc c-title ml-sm mr-sm">{{item.birthday}}.</view>
						<view class="f-desc c-title ml-sm mr-sm">{{item.rise}}cm.</view>
						<view class="f-desc c-title ml-sm mr-sm">{{item.weight}}kg.</view>
					</view>
				</view>
			</swiper-item>
		</block>
	</swiper>
</template>
 
<script>
	import {
		mapState
	} from "vuex"
	var time = null
	export default {
		props: {
		  imageList: {
		    type: Array,
		    default: () => {
		      return []
		    },
		  },
		},
		components: {
		},
		name: "video-list",
		data() {
			return {
				screenHeight: 0,
				currentImgIndex: 0
			};
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
		}),
		imageList: {
		  handler: function (newVal, oldVal) {
		    // this.listdiv()
		  },
		  deep: true,
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					console.log("首页获取到的页面高度:windowHeight", res.windowHeight);
					this.screenHeight = res.windowHeight;
				}
			});
		},
		methods: {
			change(res) {
				clearTimeout(time)
				this.page = res.detail.current
				let swiperPre = this.$refs.swiperItem[this.page - 1]
				let swiperItem = this.$refs.swiperItem[this.page]
				let swiperNext = this.$refs.swiperItem[this.page + 1]
				let currentType = swiperItem.$attrs["data-type"]
				time = setTimeout(() => {
					if (this.pageStartY > this.pageEndY) {
						console.log("向上滑动当前页:" + this.page);
						console.log("改变当前显示图片索引:", this.currentImgIndex);
						if (currentType === "video") {
							swiperItem.$children[0].playVideo()
							this.pageStartY = 0
							this.pageEndY = 0
						} else {
							console.log("改变当前显示图片索引:", this.currentImgIndex);
							this.$nextTick(() => {
								this.currentImgIndex = 0
							})
						}
						if (swiperPre.$attrs["data-type"] === "video") {
							swiperPre.$children[0].pauseVideo()
						}
					} else {
						console.log("向下滑动" + this.page);
						console.log("改变当前显示图片索引:", this.currentImgIndex);
						if (currentType === "video") {
							swiperItem.$children[0].playVideo()
							this.pageStartY = 0
							this.pageEndY = 0
						} else {
							console.log("改变当前显示图片索引:", this.currentImgIndex);
							this.$nextTick(() => {
								this.currentImgIndex = 0
							})
						}
						if (swiperNext.$attrs["data-type"] === "video") {
							swiperNext.$children[0].pauseVideo()
						}
					}
				}, 1)
			},
			touchStart(res) {
				this.pageStartY = res.changedTouches[0].pageY;
				console.log(this.pageStartY);
			},
			touchEnd(res) {
				this.pageEndY = res.changedTouches[0].pageY;
				console.log(this.pageEndY);
			},
			changeswiper(e) {
				this.currentImgIndex = e.detail.current
			},
			toUserDetail(id) {
				this.$util.goUrl({
					url: '/user/pages/user-detail?id=' + id
				})
			},
		}
	}
</script>
 
<style>
	.swiper {
		width: 100vw;
		height: 100vh;
	}
 
	.swiper-item {
		width: 100vw;
		height: 100vh;
		z-index: 9;
	}
 
	.swiper-img {
		width: 100%;
		height: 80%;
	}
 
	.img-boxs {
		/* height: 100%; */
	}
 
	/* 	.left-box {
		z-index: 20;
		position: absolute;
		bottom: 50px;
		left: 10px;
	}
 
	.right-box {
		z-index: 20;
		position: absolute;
		bottom: 50px;
		right: 10px;
	} */
</style>